import React from 'react';
import { Layout, Form, Input, Button, Checkbox, Space, Row, Col, message } from 'antd';
import './Login.css';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { login } from "../../axios/api";
const { Header, Footer,  Content } = Layout;


const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};
class NormalLoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      that: this.props.that,

    }
  }
  componentDidMount(){
    const that = this.state.that;
    var token = localStorage.getItem("token");
    if(!token){
      token=sessionStorage.getItem("token");
    }
    if(token){
      that.props.history.replace("/home");
    }
  }
  onFinish = async (values)=>{
    
    const that = this.state.that;
    var remember = values.remember;
    if (remember) {
      let res = await login(values);
      if (res.code === 200) {
        
        //退出时清空所有session
        if (remember) {
          localStorage.setItem("token", res.data);
        } else {
          sessionStorage.setItem("token", res.data);
        }
        that.props.history.replace("/home");
      } else {
        message.error(res.msg)
      }

    }
  }
  render() {
    return (
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={this.onFinish}
      >
        <Form.Item
          name="account"
          rules={[{ required: true, message: '请输入用户名!' }]}

        >
          <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
        </Form.Item>
        <Form.Item
          name="passwd"
          rules={[{ required: true, message: '请输入密码!' }]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="passwd"
            placeholder="密码"
          />
        </Form.Item>
        <Form.Item>
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>记住我</Checkbox>
          </Form.Item>
          <a className="login-form-forgot" href="">
            忘记密码
            </a>
        </Form.Item>

        <Form.Item >
          <Button type="primary" htmlType="submit" className="login-form-button">
            登录
            </Button>
          <a href="">注册</a>
        </Form.Item>
      </Form>
    );
  }

};
export default class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        that: this
    }
}
  render() {
    return (
      <div className="login">
        <Layout className="login-layout">
          <Header>Header</Header>
          <Content className="login-main" >
            <Space direction="vertical" >
              <h2><b>登录</b></h2>
              <NormalLoginForm that={this.state.that}/>
            </Space>
          </Content>
          <Footer className="login-footer">@www.new4net.com</Footer>
        </Layout>
      </div>

    )
  }
}